<template>
	<div>
		<button class="btn btn-white btn-default btn-round" @click="refresh()">
			<i class="ace-icon fa fa-refresh red"></i>
			刷新
		</button>
		<table id="simple-table" class="table  table-bordered table-hover">
		<thead>
			<tr>
				<th class="center">ID</th>
				<th class="center">邮箱</th>
				<th class="center">验证码</th>
				<th class="center">用途</th>
        <th class="center">生成时间</th>
        <th class="center">用途</th>
      </tr>
		</thead>

		<tbody>
			<tr v-for="sms in smss">
				<td class="center">{{sms.id}}</td>
				<td class="center">{{sms.mobile}}</td>
				<td class="center">{{sms.code}}</td>
				<td class="center">{{SMS_USE_ARRAY| optionKV(sms.use)}}</td>
				<td class="center">{{sms.at}}</td>
				<td class="center">{{SMS_STATUS_ARRAY | optionKV(sms.status)}}</td>
			</tr>
			<tr v-if="smss.length === 0">
				<td colspan="5" class="center" style="background-color: lightgrey;font-family: 'Courier New',serif">暂无数据</td>
			</tr>
	</tbody>
	</table>
	<!-- 分页组件 -->
	<pagination ref="pagination" v-bind:list="list"></pagination>
	</div>

</template>

<script>
	import Pagination from "../../components/pagination.vue"
	export default {
		name: "sms",
		components:{
			Pagination
		},
		data:function(){
			return{
				smss:[],
        SMS_USE_ARRAY: SMS_USE_ARRAY,
        SMS_STATUS_ARRAY: SMS_STATUS_ARRAY
			}
		},
		mounted: function(){
			// this.$parent.activeSidebar("business-sms-sidebar")
			let _this = this;
			_this.list();
		},
		methods:{
			refresh() {
				let _this = this;
				Loading.show();
				_this.list(_this.$refs.pagination.page);
				Loading.hide();
			},
			/* 查找手机 */
			list(page=1) {
				let _this = this;
				_this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/sms/list',{
					page:page,
					size:_this.$refs.pagination.size
				}).then((response)=>{
					_this.smss = response.data.data.list;
					_this.$refs.pagination.render(page, response.data.data.total);
				}).catch((error)=>{
				  Toast.error(error);
				})
			}

		}
	}
</script>
